window.onload = function(){
    searchEffect();
    time_back();
    bannerEffect();
}

function searchEffect(){
    var bannerHeight = document.querySelector('.jd_banner').offsetHeight;
    window.onscroll = function(){
        // console.log(document.documentElement.scrollTop);
        var opacity = document.documentElement.scrollTop / bannerHeight;
        document.querySelector('.jd_search').style.background = 'rgba(233, 35, 34, ' + opacity+')';
    }
}

function time_back(){
    var time = 3700;//3700秒相当于1小时+1分钟40秒
    var hour = Math.floor(time / 3600);
    var minute = Math.floor(time % 3600 / 60);
    var second = time % 60;
    document.querySelector('.jd_sk_time span:nth-of-type(1)').innerText = Math.floor(hour / 10);
    document.querySelector('.jd_sk_time span:nth-of-type(2)').innerText = hour % 10;
    document.querySelector('.jd_sk_time span:nth-of-type(4)').innerText = Math.floor(minute / 10);
    document.querySelector('.jd_sk_time span:nth-of-type(5)').innerText = minute % 10;
    document.querySelector('.jd_sk_time span:nth-of-type(7)').innerText = Math.floor(second / 10);
    document.querySelector('.jd_sk_time span:nth-of-type(8)').innerText = second % 10;
    var timer = setInterval(function(){
        time--;
        if(time <= 0){
            clearTimeout(timer);
        }
        var hour = Math.floor(time / 3600);
        var minute = Math.floor(time % 3600 / 60);
        var second = time % 60;
        document.querySelector('.jd_sk_time span:nth-of-type(1)').innerText = Math.floor(hour / 10);
        document.querySelector('.jd_sk_time span:nth-of-type(2)').innerText = hour % 10;
        document.querySelector('.jd_sk_time span:nth-of-type(4)').innerText = Math.floor(minute / 10);
        document.querySelector('.jd_sk_time span:nth-of-type(5)').innerText = minute % 10;
        document.querySelector('.jd_sk_time span:nth-of-type(7)').innerText = Math.floor(second / 10);
        document.querySelector('.jd_sk_time span:nth-of-type(8)').innerText = second % 10;
    },1000)
}

function bannerEffect(){
    // 1. 由于轮播图图片数量不确定，不能写死，必须要由js动态设置修改轮播图的页面结构
    // 1.0 把上面修改的首尾添加的删除掉
    // 1.1 获取轮播图结构 banner (.jd_banner)
    var banner = document.querySelector('.jd_banner');
    // 2.2 获取图片容器 imgBox (ul:first-of-type)
    var imgBox = banner.querySelector('.jd_bannerImg');
    // 1.3 获取原始的第一张图片 first (li:first-of-type)
    var first = imgBox.querySelector('li:first-of-type');
    // 1.4 获取原始的最后一张图片 last (li:last-of-type)
    var last = imgBox.querySelector('li:last-of-type');
    // 1.5 在首尾插入两张图片appendChild
    imgBox.appendChild(first.cloneNode(true));
    // insertBefore(需要插入的元素，位置)
    imgBox.insertBefore(last.cloneNode(true),first);

    // 2.设置对应的样式
    // 2.1 获取所有的li元素(var lis); 一定要console.log测试是不是我们要的东西
    var lis = imgBox.querySelectorAll('li');
    // 2.2 获取li元素的数量 var count 一定要console.log测试是不是我们要的东西
    var count = lis.length;
    // 2.3 获取banner的宽度 var bannerWidth一定要console.log测试是不是我们要的东西
    var bannerWidth = banner.offsetWidth;
    // 2.4 设置图片盒子的总宽度(imgBox) 审查元素，看是否添加成功
    imgBox.style.width = count * bannerWidth + 'px';
    // 2.5 设置每个li元素的宽度为 bannerWidth
    for(var i=0;i<lis.length;i++){
        lis[i].style.width = bannerWidth + 'px';
    }
    // 3. 设置默认偏移(负的一个bannerWidth)
    imgBox.style.left = -bannerWidth + 'px';
    // 4. 当屏幕宽度变化的时候，重新计算宽度
    window.onresize = function(){
        bannerWidth = banner.offsetWidth;
        imgBox.style.width = count * bannerWidth + 'px';
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.width = bannerWidth + 'px';
        }
        imgBox.style.left = -bannerWidth + 'px';
    }
    
    //5. 实现自动轮播
    //5.1 定义图片索引,索引值从0开始，但由于图片已经偏移了一个li的距离，所以默认初始值为1
    var index = 1;
    // 5.2 开启定时器(setinterval 2000毫秒)
    //5.3 索引自增
    //5.4 添加过渡效果
    //5.5 根据最新的索引值重新设置偏移
    // 5.6 500毫秒以后，判断是否是最后一张
    //5.7 如果是最后一张，则让index重置
    //5.8 去掉过渡效果
    //5.9 重新修改图片盒子的偏移值
    var setIndicator = function (index) {
        var indicators = banner.querySelector('ul:last-of-type').querySelectorAll('li');
        console.log(indicators);
        for (var i = 0; i < indicators.length; i++) {
            indicators[i].classList.remove('active');
        }
        indicators[index - 1].classList.add('active');
    }

    var timerId;
    function startTime(){
        timerId = setInterval(function () {
            index++;
            imgBox.style.transition = 'left ease-in-out .5s';
            imgBox.style.left = -index * bannerWidth + 'px';
            // setTimeout(function () {
            //     if (index == count - 1) {
            //         index = 1;
            //         imgBox.style.transition = 'none';
            //         imgBox.style.left = -index * bannerWidth + 'px';
            //     }
            // }, 500)
        }, 2000);
    }

    startTime();
    
    //手动轮播
    // 6. 实现手动轮播
    // 6.1 触摸开始 记录手指的起始位置(startX)
    //6.1.1 清除定时器
    //6.2.2 记录手指的起始位置
    // 6.2 滑动过程 记录手指在滑动过程中的位置(moveX)，，通过left样式实现图片的偏移
    // 6.2.2 记录手指在滑动过程中的位置(moveX)
    //6.2.3 计算出相对于起始位置的偏移值(distanceX)
    //6.2.4 修改图片盒子的left值
    var startX,moveX,distanceX;
    var isMove = true;
    imgBox.addEventListener('touchstart',function(e){
        clearInterval(timerId);
        // console.log(e.targetTouches[0].clientX);
        startX = e.targetTouches[0].clientX;
    })
    imgBox.addEventListener('touchmove',function(e){
        if(isMove == false)return;
        moveX = e.targetTouches[0].clientX;
        distanceX = moveX - startX;
        imgBox.style.transition = 'none';
        imgBox.style.left = -index * bannerWidth + distanceX + 'px';
    })
    imgBox.addEventListener('touchend',function(){
        if(isMove == false)return;
        isMove = false;
        if(Math.abs(distanceX) > 100){
            if(distanceX > 0){
                index--;
                imgBox.style.transition = 'left ease-in-out .5s';
                imgBox.style.left = -index * bannerWidth + 'px';
            }else{
                index++;
                imgBox.style.transition = 'left ease-in-out .5s';
                imgBox.style.left = -index * bannerWidth + 'px';
            }
        }else{
            imgBox.style.transition = 'left ease-in-out .5s';
            imgBox.style.left = -index * bannerWidth + 'px';
        }
        startTime();
        
    })
    imgBox.addEventListener('webkitTransitionEnd',function(){
        if(index == count -1){
            index = 1;
            imgBox.style.transition = 'none';
            imgBox.style.left = -index * bannerWidth  + 'px';
        }else if(index == 0){
            index = count - 2;
            imgBox.style.transition = 'none';
            imgBox.style.left = -index * bannerWidth  + 'px';
        }
        isMove = true;
        setIndicator(index)
    })
}


